﻿
@{
    ViewBag.Title = "PracticeTest";
}

<style type="text/css">
    .question-body {
        padding: 30px 30px 20px 30px;
        background: #FFF;
    }

    ul#exampaper-body {
        margin-bottom: 0px;
    }

        ul#exampaper-body li {
            padding-bottom: 0px;
        }

    .question-body {
        min-height: 300px;
    }
</style>

<div class="content" style="margin-bottom: 100px;">

    <div class="container">
        <div class="row">
            <div class="col-xs-3" style="padding-right: 0px;padding-bottom:15px;">
                <div class="def-bk" id="bk-exam-control">

                    <div class="def-bk-content" id="exam-control">

                        <div>

                            <span style="color:#428bca;">知识类型：</span>
                            <div>
                                <span>随机类型</span>
                            </div>
                            <span style="color:#428bca;">题型库：</span>
                            <div>
                                <span id="practice-type" class="pt-singlechoice">[ 共 <span class="pt-tno"> @ViewBag.count </span> 题 ]<span class="pt-qcode" style="display:none;">qt-singlechoice</span></span>
                            </div>
                            <!-- <span style="color:#428bca;">学习进度：</span>
                            <div class="h-progress" style="margin-top:5px;" title="50%">
                                <span></span>
                            </div> -->
                            <span id="exam-timestamp" style="display:none;">0</span>
                            <div id="answer-save-info"></div>

                        </div>

                        <div id="exam-info" style="display:none;">
                            <span id="answer-hashcode"></span>
                        </div>
                    </div>

                </div>

            </div>
            <div class="col-xs-9" style="padding-right: 0px;">
                <div class="def-bk" id="bk-exampaper">
                    <div class="expand-bk-content" id="bk-conent-exampaper">
                        <div id="exampaper-header">
                            <div id="exampaper-title" style="margin-bottom:15px;">
                                <i class="fa fa-paper-plane"></i>
                                <span id="exampaper-title-name"> 随机练习 </span>
                            </div>
                            <div id="exampaper-desc-container">
                            <div id="exampaper-desc" class="exampaper-filter">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <b>题目:</b> <div id="questionName">@ViewBag.question.Title</div>   
                                    </div>
                                </div>
                             
                            </div>
                            </div> 

                        </div>
                        <div id="exampaper-body">
                            <div class="radio">
                                <label>A.
                                    <input type="radio" name="optionsRadios" id="optionsRadios1"
                                           value="option1" checked> @ViewBag.question.FirstOption
                                </label>
                            </div>
                            <div class="radio">
                                <label>B.
                                    <input type="radio" name="optionsRadios" id="optionsRadios2"
                                           value="option2">
                                    @ViewBag.question.SecondOption
                                </label>
                            </div>
                            <div class="radio">
                                <label>C.
                                    <input type="radio" name="optionsRadios" id="optionsRadios2"
                                           value="option2">
                                    @ViewBag.question.ThirdOption
                                </label>
                            </div>
                            <div class="radio">
                                <label>D.
                                    <input type="radio" name="optionsRadios" id="optionsRadios2"
                                           value="option2">
                                    @ViewBag.question.ForthOption
                                </label>
                            </div>
                        </div>
                        <div id="exampaper-footer">


                            <div id="question-switch">
                                
                                @if (ViewBag.Previous != null)
                                {
                                        <i class="fa fa-chevron-circle-left">
                                            @Html.ActionLink("上一题", "PracticeTest", new { id = ViewBag.Previous }, new { @class = "btn-success btn", @styles = "width:160px;" })
                                        </i>
                                }
          
                                @if (ViewBag.Next != null)
                                {
                                        <i class="fa fa-chevron-circle-right">
                                            @Html.ActionLink("下一题", "PracticeTest", new { id = @ViewBag.Next }, new {  @class = "btn-success btn", @styles = "margin-left:60px;width:160px;"  })
                                        </i>
                                }
                                <a class="btn-success btn" id="next-q-btn" style="margin-left:60px;width:160px;" href="javascript:void(0);" onclick="showAnswer()">
                                    点击自测 <i class="fa fa-chevron-circle-right"></i>
                                </a>
                            </div>
                            <div id="question-navi">
                                <div id="question-navi-controller">
                                    <i class="fa fa-arrow-circle-down"></i>
                                    <span>答案</span>
                                </div>
                                <div id="question-navi-content" style="display:none;">
                                    正确答案是：
                                    @ViewBag.question.Answer
                                    <br/>
                                    你做对了吗？
                                </div>
                            </div>

                        </div>
                    </div>
  
                </div>


            </div>
        </div>
    </div>

</div>

<script>
    function showAnswer() {
        $("#question-navi-content").show();
    }
</script>